<template>
	<div class="repair-box">
		<div class="box-title">
			<span class="title">{{ rpitem.rep_i_nameall }}</span>
			<span v-if="rpitem.rep_wo_instate != '结束'" class="state dsl">{{ rpitem.rep_wo_instate }}</span>
			<span v-else class="state wg">{{ rpitem.rep_wo_instate }}</span>
			<a-button v-if="!detail" type="link" style="float: right" @click="toDetail(rpitem.rep_wo_id)">详情>></a-button>
		</div>
		<div class="desc">
			{{ rpitem.rep_wo_fault_description }}
		</div>
		<div class="pics">
			<div v-if="rpitem.rep_wo_imgs">
				<template v-for="(img, inx) in rpitem.rep_wo_imgs" :key="`img_${inx}`">
					<video v-if="img.filename.indexOf('mp4') > 0" :src="APP_CONFIG.imgBaseUrl + img.filename" controls></video>
					<a-image v-else :src="APP_CONFIG.imgBaseUrl + img.filename" :alt="img.showname" />
				</template>
			</div>
		</div>
		<div class="info">
			<a-row :gutter="8" :wrap="true">
				<a-col :span="7" class="box">
					<img class="icon" :src="UserICON" />
					<span class="txt">用户名：</span>
					<span class="val">{{ rpitem.rep_wo_repairbodyname }}</span>
				</a-col>
				<a-col :span="8" class="box" v-if="detail">
					<img class="icon" :src="TimeICON" />
					<span class="txt">联系电话：</span>
					<span class="val">{{ rpitem.rep_wo_phone }}</span>
				</a-col>
				<a-col :span="9" class="box">
					<img class="icon" :src="TimeICON" />
					<span class="txt">预约时间：</span>
					<span class="val">{{ rpitem.rep_wo_will_time1 }}</span>
				</a-col>
			</a-row>
			<a-row :gutter="8">
				<a-col :span="7" class="box" v-if="detail">
					<img class="icon" :src="BillICON" />
					<span class="txt">无人维修：</span>
					<span class="val">{{ rpitem.rep_wo_will_no_body_done }}</span>
				</a-col>
				<a-col :span="8" class="box" v-if="detail">
					<img class="icon" :src="BillICON" />
					<span class="txt">报修单位： </span>
					<span class="val">{{ rpitem.rep_a_name }}</span>
				</a-col>
				<a-col :span="9" class="box" v-if="detail">
					<img class="icon" :src="TimeICON" />
					<span class="txt">提交时间： </span>
					<span class="val">{{ rpitem.rep_wo_insert_time1 }}</span>
				</a-col>
			</a-row>
			<a-row :gutter="8">
				<a-col :span="7" class="box" v-if="detail">
					<img class="icon" :src="BillICON" />
					<span class="txt">单号：</span>
					<span class="val">{{ rpitem.rep_wo_serialnumber }}</span>
				</a-col>
				<a-col :span="17" class="box">
					<img class="icon" :src="PointICON" />
					<span class="txt">地址：</span>
					<span class="val">{{ rpitem.rep_a_nameall }}</span>
				</a-col>
			</a-row>
		</div>
	</div>
</template>
<script setup>
	import UserICON from '@/assets/images/repair/user.png';
	import TimeICON from '@/assets/images/repair/time.png';
	import PointICON from '@/assets/images/repair/point.png';
	import BillICON from '@/assets/images/repair/bill.png';
	import { useRouter } from 'vue-router';
	import { APP_CONFIG } from '@/constants/system-const';
	const router = useRouter();
	const emit = defineEmits(['showDetail'])
	const props = defineProps({
		detail: {
			type: Boolean,
			default: false,
		},
		rpitem: {
			type: Object,
			default: {},
		},
	});

	function toDetail(rep_wo_id) {
		emit('showDetail',rep_wo_id);
		// router.push({
		// 	path: '/repairdetail',
		// 	query: { rep_wo_id },
		// });
	}
</script>
<style lang="less" scoped>
	.repair-box {
		border-bottom: 1px dotted #999;
		margin-bottom: 16px;
		padding-bottom: 16px;
		.box-title {
			.title {
				font-size: 16px;
				color: #1d2129;
				line-height: 24px;
				font-weight: 700;
			}
			.state {
				font-size: 12px;
				padding: 3px 6px;
				border-radius: 2px;
				margin-left: 8px;
				vertical-align: text-bottom;
				&.dsl {
					color: #f77234;
					background-color: #fff3e8;
				}
				&.wg {
					color: #07c160;
					background-color: #e8ffef;
				}
			}
		}
		.desc {
			color: #4e5969;
			font-size: 16px;
			margin: 8px 0;
		}
		.pics {
			:deep(.ant-image) {
				img {
					width: 128px;
					height: 128px;
					border-radius: 4px;
				}
				margin-right: 16px;
				display: inline-flex;
			}
			video {
				height: 128px;
				border-radius: 4px;
				margin-right: 16px;
			}
		}
		.info {
			.box {
				.icon {
					width: 16px;
					height: 16px;
					margin-right: 4px;
				}
				.txt {
					min-width: 70px;
					display: inline-block;
					color: #86909c;
					font-size: 14px;
					vertical-align: middle;
				}
				.val {
					color: #1d2129;
					font-size: 14px;
					margin-right: 24px;
					vertical-align: middle;
				}
			}
		}
	}
</style>
